<template>
  <el-container
    style="display: flex; flex-direction: column; width: 100%; height: 100%"
  >
    <div class="head">
      <img src="../assets/tubiao.png" style="width: 5vw" />
      <span class="font">燕山大学环保应急管理系统</span>
      <el-button
        type="primary"
        :icon="Avatar"
        style="
          position: absolute;
          margin-left: 80vw;
          color: #fff;
          font-weight: bold;
          margin-top: 2.8vw;
          font-size: 1.3vw;
          width: 15vw;
          background-color: #02a7f0;
        "
        @click="drawer = true"
      >
        我的主页
      </el-button>

      <el-drawer
        v-model="drawer"
        :title="'欢迎您,指挥人员' + userInfo.userName + '!'"
        :with-header="true"
        style="height: 50vw"
      >
        <div style="margin-left: 3vw">
          <span> 今天是{{ dateWithoutTimezone }} </span>
          <br />
          <div style="height: 1vw"></div>
          <span>当前时间:{{ time }}</span
          ><br />
          <div style="height: 1vw"></div>
          <span>不要偷懒哦，今天也要是努力工作的一天!</span><br />
          <div style="height: 1vw"></div>
        </div>
        <br />
        <el-card style="max-width: 480px; margin-left: 1vw">
          <template #header>
            <div class="card-header" style="margin-left: 7.5vw">
              <span style="font-weight: bold; font-size: 1.8vw"
                >指挥人员信息</span
              >
            </div>
          </template>
          <p style="font-size: 1.4vw; text-align: center">
            当前指挥人员账号：{{ userInfo.userID }}
          </p>
          <br />
          <p style="font-size: 1.4vw; text-align: center">
            当前指挥人员姓名：{{ userInfo.userName }}
          </p>
          <template #footer
            ><el-button
              type="primary"
              plain
              @click="ShowAndHidden"
              style="margin-left: 8vw"
              >修改个人信息</el-button
            >
          </template>
        </el-card>

        <div v-if="isShow" style="margin: 1vw 0">
          <el-card style="max-width: 25vw; margin-left: 1vw">
            <div
              style="
                text-align: center;
                font-size: 2vw;
                font-weight: bold;
                margin-bottom: 1vw;
              "
            >
              个人信息修改
            </div>
            <el-form :model="form" label-width="auto" style="max-width: 600px">
              <el-form-item label="当前账户账号:" style="margin-left: -0.7vw">
                <el-input
                  v-model="form.userID"
                  style="width: 240px; margin-left: 0.6vw"
                  disabled
                />
              </el-form-item>
              <el-form-item label="修改账户姓名:" style="margin-left: -0.7vw">
                <el-input
                  v-model="form.userName"
                  style="width: 20vw; margin-left: 0.7vw"
                />
              </el-form-item>
              <el-form-item label="修改账户密码：">
                <el-input
                  v-model="form.password"
                  show-password
                  style="width: 20vw"
                />
              </el-form-item>
              <el-form-item style="margin-left: 5vw">
                <el-button
                  type="primary"
                  @click="onSubmit"
                  style="margin-right: 3vw"
                  >修改</el-button
                >
                <el-button @click="ShowAndHidden">取消</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </el-drawer>
      <span class="exit">
        <el-button
          type="primary"
          :icon="SwitchButton"
          style="
            position: absolute;
            color: red;
            margin-left: 0.7vw;
            font-weight: bold;
            font-size: 1.3vw;
            width: 9vw;
            background-color: #02a7f0;
          "
          @click="exit"
        >
          -&gt;退出&lt;-
        </el-button>
      </span>
    </div>
    <el-container style="flex: 1">
      <el-aside width="200px" style="background-color: #337ecc">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#337ecc"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          router
        >
          <el-badge :value="reportNum" class="item">
            <el-menu-item index="/IndexD/ReportManager">
              <img src="../assets/jiebao.png" style="width: 40px" />
              <span style="margin-left: 1vw; width: 6vw">接报审批</span>
            </el-menu-item>
          </el-badge>
          <el-menu-item index="/IndexD/ReportHistory">
            <img src="../assets/history.png" style="width: 40px" />
            <span style="margin-left: 1vw; width: 6vw">历史接报</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
    <el-footer style="background-color: #409eff; flex: 0 0 3vw">
      <div class="footer-box" style="font-size: 10px; text-align: center">
        <div style="height: 0.4vw"></div>
        <span
          >帮助&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;隐私&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;条款</span
        >
        <div style="height: 0.3vw"></div>
        <span>copyright 2024 kalaxiaomi V1.0.1卡拉小米技术出品</span>
      </div>
    </el-footer>
  </el-container>
</template>
  
<script setup>
import { ref, onMounted, inject } from "vue";
import { format, parseISO } from "date-fns";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { Avatar, SwitchButton } from "@element-plus/icons-vue";
const user = ref({});
user.value = JSON.parse(sessionStorage.getItem("user"))._value;


const router = useRouter();
const route = useRoute();
const admin = ref({});
const userRes = ref("");
const userInfo = ref({});
const time = ref("00:00:00");
const value = ref(new Date());
const drawer = ref(false);
let isShow = ref(false);
const axios = inject("axios");
let reportNum = ref("");

//admin.value = JSON.parse(sessionStorage.getItem("admin"))._value;
const form = ref({
  userID: route.query.userID,
  userName: "",
  password: "",
});
const init = async() => {
  axios
    .post("Director/getUserInfo", {
      userID: route.query.userID,
    })
    .then((response) => {
      userInfo.value = response.data;
      console.log(userInfo.value);
    })
    .catch((error) => {
      console.log(error);
    });

    await axios
    .post("Director/getReportNum", {})
    .then((response) => {
      reportNum.value = response.data;
      console.log(reportNum.value);
    })
    .catch((error) => {
      console.log(error);
    });
    router.push({
    query:{reportNum:reportNum.value}
})

};
init();
let ShowAndHidden = () => {
  form.value.userName = userInfo.value.userName;
  form.value.password = userInfo.value.password;
  isShow.value = !isShow.value;
};
const onSubmit = async () => {
  await axios
    .post("Director/renewUserInfo", {
      userName: form.value.userName,
      password: form.value.password,
      userID: form.value.userID,
    })
    .then((response) => {
      userRes.value = response.data;
      console.log(userRes.value);
      console.log(form.value.userName);
      console.log(form.value.userID);
      console.log(form.value.password);
    })
    .catch((error) => {
      console.log(error);
    });

  if (userRes.value == 1) {
    ElMessage({
      message: "修改个人信息成功！",
      type: "success",
      plain: true,
    });
  } else if (userRes.value == 0) {
    ElMessage({
      message: "修改信息失败！",
      type: "error",
      plain: true,
    });
  }
  location.reload();
};

const date = parseISO(value.value.toISOString()); // 将 Date 对象转换为 date-fns 兼容的日期对象
const dateWithoutTimezone = ref(format(date, "yyyy年MM月dd日"));
const updateTime = () => {
  const d = new Date();
  const hour = d.getHours() < 10 ? "0" + d.getHours().toString() : d.getHours();
  const minute =
    d.getMinutes() < 10 ? "0" + d.getMinutes().toString() : d.getMinutes();
  const second =
    d.getSeconds() < 10 ? "0" + d.getSeconds().toString() : d.getSeconds();
  time.value = hour + ":" + minute + ":" + second;
};

onMounted(() => {
  const timer = setInterval(updateTime, 1000);
  return () => clearInterval(timer);
});

const exit = () => {
  router.push({
    path: "/",
  });
};
</script>

<style scoped>
.head {
  width: 100vw;
  height: 5vw;
  background-color: #02a7f0;
  position: relative;
}
.font {
  font-family: 华文行楷;
  font-size: 2vw;
  position: absolute;
  color: #fff;
  margin-top: 1.5vw;
}

.exit {
  margin-left: 85vw;
  position: absolute;
  text-align: center;
}
.item {
  margin-top: 10px;
}
</style>